<template>
  <div class="echart-shape-line-bar">
    <table
      v-if="isYZ"
      class="echart_table"
    >
      <tr>
        <th>{{ $demoi18n('echart.th.value') }}</th>
        <th>{{ $demoi18n('echart.th.serieType') }}</th>
        <th>{{ $demoi18n('echart.th.legendMarker') }}</th>
      </tr>
      <tr
        v-for="(n, i) in tableData"
        :key="i"
      >
        <td>{{ n.field }}</td>
        <td>
          <ValueInputer
            v-model:value="yzSeries[i].type"
            value-type="List"
            :enum-values="lineBarserieTypes"
          />
        </td>
        <td>
          <ValueInputer
            v-model:value="yzSeries[i].legendIcon"
            value-type="List"
            :enum-values="legendIcons_"
          />
        </td>
      </tr>
    </table>

    <div
      v-else
      class="serieNames"
    >
      <table
        v-show="nameSeries.length"
        class="echart_table nameSeries_table"
      >
        <tr>
          <th>{{ $demoi18n('echart.th.sValue') }}</th>
          <th>{{ $demoi18n('echart.th.serieType') }}</th>
          <th>{{ $demoi18n('echart.th.legendMarker') }}</th>
          <th></th>
        </tr>
        <tr
          v-for="(n, i) in nameSeries"
          :key="i"
        >
          <td>
            <ValueInputer
              v-model:value="n.name"
              :enum-values="serieNames"
              :rules="genRulesByKey('echart._nameSeries.[x].name')"
            />
          </td>
          <td>
            <ValueInputer
              v-model:value="n.type"
              value-type="List"
              :enum-values="lineBarserieTypes"
            />
          </td>
          <td>
            <ValueInputer
              v-model:value="n.legendIcon"
              value-type="List"
              :enum-values="legendIcons_"
            />
          </td>
          <td>
            <el-button
              icon="Delete"
              :link="true"
              type="primary"
              size="default"
              @click="delNameSerie(n)"
            > </el-button>
          </td>
        </tr>
      </table>

      <el-button
        icon="Plus"
        size="default"
        @click="addNameSerie()"
      >
        {{ $demoi18n('btn.add') }}
      </el-button>
    </div>
  </div>
</template>
<script>
import FormItem from '@/components/common/echart/form-item.vue';
import { lineBarserieTypes, legendIcons } from '@/components/common/echart/form-item-options.js';
import echartUtil from '@/components/common/echart/echart-util.js';
import echartDefault from '@/components/common/echart/echart-property-default.js';
import ValueInputer from '@/components/common/value-inputer/value-inputer.vue';
import { mapState, mapMutations } from 'vuex';
import EchartCommonMixin from '@/components/common/echart/mixins/echart-common-mixin.js';

const dfDataItem = { name: '', type: '', legendIcon: '' };

export default {
  components: { FormItem, ValueInputer },
  mixins: [EchartCommonMixin],
  props: {
    form: Object,
  },
  data() {
    return {
      lineBarserieTypes,
      yzSeries: [JSON.parse(JSON.stringify(dfDataItem))],
      nameSeries: [JSON.parse(JSON.stringify(dfDataItem))],
    };
  },
  computed: {
    legendIcons_() {
      return legendIcons.filter(n => n.value !== 'line'); // 一个组件多个图例图形没法用横线图标
    },

    // 是否双轴类型
    isYZ() {
      const yzComps = ['biaxial-single-line-bar', 'biaxial-line-bar'];
      return yzComps.includes(this.form.echart._componentName);
    },
    tableData() {
      const tableData = this.panelConfig.data.tableData
        .filter(n => n.field !== 'x');
      return tableData;
    },
  },
  watch: {
    tableData() {
      const yzSeries = [];
      this.tableData.forEach(n => {
        let item = this.yzSeries.find(n1 => n1.name === n.field);
        if (!item) {
          item = JSON.parse(JSON.stringify(dfDataItem));
          item.name = n.field;
        }
        yzSeries.push(item);
      });
      this.yzSeries = yzSeries;
    },
    yzSeries: {
      handler() {
        this.form.echart._yzSeries = this.yzSeries;
      },
      deep: true,
    },
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      if (this.isYZ) {
        echartUtil.registerVar('echart._yzSeries', this.form, this, []);
        this.yzSeries = this.form.echart._yzSeries;
      } else {
        echartUtil.registerVar('echart._nameSeries', this.form, this, []);
        this.nameSeries = this.form.echart._nameSeries;
      }
    },
    addNameSerie() {
      const item = JSON.parse(JSON.stringify(dfDataItem));
      this.nameSeries.push(item);
    },
    delNameSerie(item) {
      const index = this.nameSeries.indexOf(item);
      this.nameSeries.splice(index, 1);
    },
  },
};
</script>
<style lang="less" scoped>
@import '../less/echart-common.less';
.nameSeries_table {
  margin-bottom: 5px;
}
</style>
